<template>
  <div class="previewResource">
    <van-nav-bar
      :title="courseName"
      left-arrow
      @click-left="$router.back()"
      class="detail-header"
      fixed
    >
      <template #right>
        <van-icon
          name="wap-nav"
          size="18"
          @click="toggleChapterList"
          class="nav-icon"
        />
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.previewResource {
  width: 100%;
  height: 100%;
  .detail-header {
    background: #fff;
    --van-nav-bar-title-text-color: #1f2937;
    --van-nav-bar-icon-color: #6b7280;

    .nav-icon {
      cursor: pointer;
      transition: transform 0.2s ease;

      &:hover {
        transform: scale(1.1);
      }
    }
  }
}
</style>